<template>
  <div style="max-width: 1200px; margin: 0 auto">
    <!-- <div >1123123</div> -->
    <div id="chart" :style="wh"></div>
  </div>
</template>
      
      <script>
import * as echarts from "echarts";
import { TitleComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
var myChart;
export default {
  data() {
    return {
      wh: {
        height:
          document.documentElement.clientWidth >= 1200 ? "600px" : "1200px",
        width: document.documentElement.clientWidth < 1200 ? "600px" : "1200px",
        margin: "0 auto",
      },
      data: {
        cases: {
          success: 0,
          failure: 0,
          error: 0,
          skip: 0,
        },
        step: {
          success: 0,
          failure: 0,
          error: 0,
          skip: 0,
        },
      },
      data1: {
        cases: {
          success: 10,
          failure: 1,
          error: 0,
          skip: 10,
        },
        step: {
          success: 10,
          failure: 1,
          error: 0,
          skip: 10,
        },
      },
    };
  },
  methods: {
    getwh() {
      // console.log(this.height1);
      return this.wh;
    },
    myEcharts: function () {
      var chartDom = document.getElementById("chart");
      echarts.use([TitleComponent, PieChart, CanvasRenderer]);
      myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        toolbox: {
          show: true,
          feature: {
            // mark: { show: true },
            dataView: { show: true, readOnly: true,title: '数据视图'},
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },

        animation: false,

        series: [
          {
            name: "测试用例",
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 3,
            },
            label: {
              //饼图图形上的文本标签
              show: true,
              position: "inner", //标签的位置

              fontWeight: 300,
              fontSize: 16, //文字的字体大小
              formatter: function (params) {
                if (params.data.value == 0) {
                  return "";
                } else {
                  //   console.error(params,a)
                  return params.data.value + "\n" + params.percent + "%";
                }
              },
            },

            data: [
              {
                value: this.data.cases.success,
                name: "成功",
                itemStyle: { color: "#1aad19" },
              },
              {
                value: this.data.cases.failure,
                name: "失败",
                itemStyle: { color: "#FE0000" },
              },
              {
                value: this.data.cases.error,
                name: "错误",
                itemStyle: { color: "#ccff33" },
              },
              {
                value: this.data.cases.skip,
                name: "跳过",
                itemStyle: { color: "#7a7e83" },
              },
            ],
            //  left: '50%',
            // right: 0,
            emphasis: {
              show: true,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            name: "测试步骤",
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              //饼图图形上的文本标签
              show: true,
              position: "inner", //标签的位置

              fontWeight: 300,
              fontSize: 16, //文字的字体大小
              formatter: function (params) {
                if (params.data.value == 0) {
                  return "";
                } else {
                  //   console.error(params,a)
                  return params.data.value + "\n" + params.percent + "%";
                }
              },
            },
            labelLine: {
              lineStyle: {
                color: "#235894",
              },
            },

            data: [
              {
                value: this.data.step.success,
                name: "成功",
                itemStyle: { color: "#1aad19" },
              },
              {
                value: this.data.step.failure,
                name: "失败",
                itemStyle: { color: "#FE0000" },
              },
              {
                value: this.data.step.error,
                name: "错误",
                itemStyle: { color: "#ccff33" },
              },
              {
                value: this.data.step.skip,
                name: "跳过",
                itemStyle: { color: "#7a7e83" },
              },
            ],
            // left: 0,
            // right: '50%',
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        media: [
          {
            query: { maxWidth: 1199 },
            option: {
              title: [
                {
                  text: "执行结果",
                  left: "center",
                  textStyle: {
                    //文字颜色
                    color: "#000",
                    //字体风格,'normal','italic','oblique'
                    fontStyle: "normal",
                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                    fontWeight: "bold",
                    //字体系列
                    fontFamily: "sans-serif",
                    //字体大小
                    fontSize: 25,
                  },
                },
                {
                  subtext: "测试用例",
                  left: "50%",
                  top: "49%",
                  textAlign: "center",
                  subtextStyle: {
                    color: "#333333",
                    fontWeight: "bold",
                    fontSize: 18,
                  },
                },
                {
                  subtext: "测试步骤",
                  left: "50%",
                  top: "94%",
                  textAlign: "center",
                  subtextStyle: {
                    color: "#333333",
                    fontWeight: "bold",
                    fontSize: 18,
                  },
                },
              ],
              series: [{ center: ["50%", "31%"] }, { center: ["50%", "75%"] }],
              graphic: [
                {
                  //图形中间文字
                  type: "text",
                  left: "center",
                  top: "28%",
                  style: {
                    text: "",
                    textAlign: "center",
                    fill: "#f0f",
                    fontSize: 60,
                  },
                },
                {
                  //图形中间文字
                  type: "text",
                  left: "center",
                  top: "73%",
                  style: {
                    text: "",
                    textAlign: "center",
                    fill: "#f0f",
                    fontSize: 60,
                  },
                },
              ],
            },
          },
          {
            query: { minWidth: 1200 },
            option: {
              title: [
                {
                  text: "执行结果",
                  left: "center",
                  textStyle: {
                    //文字颜色
                    color: "#000",
                    //字体风格,'normal','italic','oblique'
                    fontStyle: "normal",
                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                    fontWeight: "bold",
                    //字体系列
                    fontFamily: "sans-serif",
                    //字体大小
                    fontSize: 25,
                  },
                },
                {
                  subtext: "测试用例",
                  left: "25%",
                  top: "85%",
                  textAlign: "center",
                  subtextStyle: {
                    color: "#333333",
                    fontWeight: "bold",
                    fontSize: 18,
                  },
                },
                {
                  subtext: "测试步骤",
                  left: "75%",
                  top: "85%",
                  textAlign: "center",
                  subtextStyle: {
                    color: "#333333",
                    fontWeight: "bold",
                    fontSize: 18,
                  },
                },
              ],
              series: [{ center: ["25%", "50%"] }, { center: ["75%", "50%"] }],
              graphic: [
                {
                  //图形中间文字
                  type: "text",
                  left: "22%",
                  top: "center",
                  style: {
                    text: "",
                    textAlign: "center",
                    fill: "#f0f",
                    fontSize: 60,
                  },
                },
                {
                  //图形中间文字
                  type: "text",
                  left: "72%",
                  top: "center",
                  style: {
                    text: "",
                    textAlign: "center",
                    fill: "#f0f",
                    fontSize: 60,
                  },
                },
              ],
            },
          },
        ],
      };

      option && myChart.setOption(option, true, false);
      myChart.on("click", this.pieConsole);
    },
    pieConsole(param) {
      // console.log(param.name);
      this.$emit("res", param.name);
    },
    setheight() {
      if (document.documentElement.clientWidth >= 1200) {
        this.wh.height = "600px";
      } else {
        this.wh.height = "1200px";
      }
      this.wh.width =
        document.documentElement.clientWidth < 1200 ? "600px" : "1200px";
    },
  },
  mounted() {
    this.myEcharts();
    this.setheight();
    window.onresize = () => {
      return (() => {
        this.setheight();
        setTimeout(function () {
          myChart.resize();
          //   console.log('加载框已关闭...')
        }, 100);

        // location.reload();
      })();
    };
  },
  //   created() {
  //     // 新建一个promise对象
  //     let newPromise = new Promise((resolve) => {
  //       resolve();
  //     });
  //     //然后异步执行echarts的初始化函数
  //     newPromise.then(() => {
  //       //	此dom为echarts图标展示dom

  //     });
  //   },
};
</script>
      
      <style>
/* textarea {
  font-size: 20px;
  width: 90%;
  height: 90%;
} */
</style>